<template>
  <div class="task-order-setting-con">
    <div class="left">
      <a-tabs v-model:active-key="curPage" direction="vertical" style="height: 100%">
        <a-tab-pane key="NEW_PRODUCT_PICTURE" title="新品套图"> </a-tab-pane>
        <a-tab-pane key="FIX_PICTURE" title="以图修图"> </a-tab-pane>
        <a-tab-pane key="SHOOT_VIDEO" title="视频拍摄"> </a-tab-pane>
        <a-tab-pane key="POSTER_SHOP_DESIGN" title="海报设计"> </a-tab-pane>
        <a-tab-pane key="CHANGE_DIAMOND_COLOR" title="换钻调色"> </a-tab-pane>
        <a-tab-pane key="HAND_DRAWN_DESIGN" title="手绘设计"> </a-tab-pane>
      </a-tabs>
    </div>
    <div class="right">
      <newCollectionTask :desc="configObj[curPage]" :taskType="curPage" v-if="curPage === 'NEW_PRODUCT_PICTURE'" />
      <imageRetouchingTask :desc="configObj[curPage]" :taskType="curPage" v-else-if="curPage === 'FIX_PICTURE'" />
      <posterTask :desc="configObj[curPage]" :taskType="curPage" v-else-if="curPage === 'POSTER_SHOP_DESIGN'" />
      <videoShootTask :desc="configObj[curPage]" :taskType="curPage" v-else-if="curPage === 'SHOOT_VIDEO'" />
      <changeDrillAndColor :desc="configObj[curPage]" :taskType="curPage" v-else-if="curPage === 'CHANGE_DIAMOND_COLOR'" />
      <handDrawnDesign :desc="configObj[curPage]" :taskType="curPage" v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { listPlatTaskConfigByParam } from '@/api/task'
  import newCollectionTask from './components/setting/newCollectionTask.vue'
  import imageRetouchingTask from './components/setting/imageRetouchingTask.vue'
  import posterTask from './components/setting/posterTask.vue'
  import videoShootTask from './components/setting/videoShootTask.vue'
  import changeDrillAndColor from './components/setting/changeDrillAndColor.vue'
  import handDrawnDesign from './components/setting/handDrawnDesign.vue'
  let curPage = ref('NEW_PRODUCT_PICTURE')

  let configObj: any = ref({
    SHOOT_VIDEO: '',
    NEW_PRODUCT_PICTURE: '',
    FIX_PICTURE: '',
    POSTER_SHOP_DESIGN: '',
    CHANGE_DIAMOND_COLOR: '',
    HAND_DRAWN_DESIGN: '',
  })

  const getConfigList = async () => {
    const res: any = await listPlatTaskConfigByParam({ loadAll: true })
    if (res) {
      res.data.forEach((e: any) => {
        configObj.value[e.taskType] = e.taskDesc
      })
    }
  }

  onMounted(() => {
    getConfigList()
  })
</script>

<style>
  .ser-Content {
    max-width: 150px;
    font-size: 16px;
    font-weight: 700;
  }
</style>

<style lang="less" scoped>
  .common-text {
    font-size: 12px;
    color: #a39999;
  }

  .task-order-setting-con {
    width: 100%;
    height: calc(100vh - @headerHeight - @tabviewHeight);
    background-color: white;
    padding: 10px 0 0 10px;
    box-sizing: border-box;
    display: flex;
    .left {
      height: 100%;
      width: 140px;
    }
    .right {
      flex: 1;
    }
  }

  .custom-uplaod-btn {
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }
</style>
